<template>
  <view class="product-list">
    <view class="product-item left">
      <view class="item" v-for="item in leftList" :key="item.id">
        <!-- 自己 -->
        <v-material-item-my :item="item" v-if="isMy" @reset="reset" @close="close" @remove="remove" />
        <!-- 查看作者 -->
        <v-material-item-other :item="item" v-else-if="isOther" @handleLike="handleLike" />
        <!-- 列表 -->
        <v-material-item :item="item" @handleLike="handleLike" v-else />
      </view>
    </view>
    <view class="product-item right">
      <view class="item" v-for="item in rightList" :key="item.id">
        <v-material-item-my :item="item" v-if="isMy" @reset="reset" @close="close" @remove="remove" />
        <v-material-item-other :item="item" v-else-if="isOther" @handleLike="handleLike" />
        <v-material-item :item="item" @handleLike="handleLike" v-else />
      </view>
    </view>
  </view>
</template>

<script>

import MaterialItem from './MaterialItem'
import MaterialItemMy from './MaterialItemMy'
import MaterialItemOther from './MaterialItemOther'
export default {
  props: {
    list: {
      type: Array
    },
    isMy: {
      type: Boolean,
      default: false
    },
    isOther: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    leftList() {
      return this.list.filter((v, k) => k % 2 === 0)
    },
    rightList() {
      return this.list.filter((v, k) => k % 2 !== 0)
    }
  },
  data() {
    return {
    }
  },
  components: {
    'v-material-item': MaterialItem,
    'v-material-item-my': MaterialItemMy,
    'v-material-item-other': MaterialItemOther,
  },
  updated() {
    // console.log(this.leftList)
    // console.log(this.rightList)
  },
  methods: {
    // 收藏
    handleLike(item) {
      this.$emit('handleLike', item)
    },
    // 打开
    reset(item) {
      this.$emit('reset', item)
    },
    // 关闭
    close(item) {
      this.$emit('close', item)
    },
    // 删除
    remove(item) {
      this.$emit('remove', item)
    }
  }
}
</script>

<style scoped lang="scss">
.product-list {
  padding: 0 20rpx;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10rpx;
  grid-auto-rows: minmax(1rpx, auto);
  align-items: start;
  box-sizing: border-box;
  .product-item {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10rpx;
    grid-auto-rows: minmax(1rpx, auto);
    &.left {
    }
    &.right {
    }
  }
}
</style>
